<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>How to make Crunchy Tutorials</title>
</head>
<body>
<h1>How to make Crunchy Tutorials</h1>
<p>As of version 0.8, transforming "normal" html files into Crunchy tutorials
could hardly be any easier.  
What you need is the following:</p>
<ul>
<li>A W3C compliant html file, with a filename ending with ".htm" or
".html".</li>
<li>A file in which all Python code is formatted inside &lt;pre&gt; tags with proper indentation (starting on the left margin).  Such code can represent an interpreter output session.</li>
</ul>
<p>Assuming you have such a file (let's call it tutorial.htm).  Browse for
it using the input box below and prepare to load it.</p>
<p><span title="edit tutorial">Load tutorial for editing</span></p>
<p>After loading it, you will find that crunchy has identified each 
&lt;pre&gt; tags and offer you the possibility to add some interactive elements.  For each &lt;pre&gt;, when you make changes, click on the
"Record changes" button.  When you are done with all the changes for
that tutorial, click on the "Update" button, at the lower right
of the screen.  What will happen then is the following:</p>
<ol>
<li>Crunchy will create a new file with a name where "_new" will be added
before the extension; so, in this fictituous case, it would be
tutorial_new.htm.</li>
<li>Crunchy will make a copy of your original file into this new file with
the addition of the special markup.</li>
<li>Crunchy will then display that new file, ready for further editing.
From that point on, any new changes you make (after clicking on the
"Update" button) will be recorded in tutorial_new.htm.</li>
</ol>
<p>That's it!</p>
<p>If you want some more details about the special markup, look under
the menu (Tutorials -&gt; Making Crunchy Tutorials) at either VLAM summary
or VLAM examples.</p>
</body>
</html>
